<template>
  <view class="binded-plates-modal">
    <up-popup v-model:show="show" overlay mode="center" :round="10" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">已绑定车牌</view>
        </view>
        <view class="plates-list">
          <view class="plate-item" v-for="(plate, index) in platesList" :key="index">
            <view class="plate-info">
              <view class="plate-number">{{ plate.plateNumber }}</view>
              <view class="bind-time">绑定时间：{{ plate.bindTime }}</view>
            </view>
          </view>
          <view v-if="platesList.length === 0" class="empty-tip">
            暂无绑定车牌
          </view>
        </view>
        <view class="modal-footer">
          <up-button type="primary" @click="close">关闭</up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue';

defineOptions({ name: "BindedPlatesModal" });

// 定义属性
const props = defineProps({
  platesList: {
    type: Array,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits(['update:show', 'close']);

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

// 打开弹窗
function open() {
  show.value = true;
}

// 关闭弹窗
function close() {
  show.value = false;
  emit('close');
}

// 暴露方法
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.binded-plates-modal {
  .modal-content {
    width: 80vw;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    
    .modal-header {
      margin-bottom: 20px;
      
      .modal-title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #333;
      }
    }
    
    .plates-list {
      max-height: 50vh;
      overflow-y: auto;
      
      .plate-item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .plate-info {
          .plate-number {
            font-size: 16px;
            font-weight: bold;
            color: #409eff;
            margin-bottom: 5px;
          }
          
          .bind-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
      
      .empty-tip {
        text-align: center;
        color: #999;
        padding: 20px 0;
      }
    }
    
    .modal-footer {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>